<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>魔塔</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-side layui-bg-black">
            <div class="avater">
                <div class="layui-col-md6">
                    <img src="/static/images/hero/avater.jpg">
                </div>
                <div class="layui-col-md6" style="margin-top:55px">
                    <p>[名称]：英雄</p>
                    <p>[等级]：<b class="level">0</b>级</p>
                </div>
            </div>
            <div class="main layui-col-md12">
                <p>[楼层]：第<b class="floor">0</b>层</p>
                <p>[生命力]：<b class="hp">0</b></p>
                <p>[攻击力]：<b class="atk">0</b></p>
                <p>[防御力]：<b class="def">0</b></p>
                <p>[命中率]：<b class="hit">0</b></p>
                <p>[闪避率]：<b class="dod">0</b></p>
                <p>[暴击率]：<b class="cri">0</b></p>
                <p>[经验值]：<b class="exp">0</b>/<b class="max_exp">0</b></p>
            </div>
            <div class="title layui-col-md12">
                <p>[装备]</p>
            </div>
            <div class="equipment layui-col-md12">
                <p class="layui-col-md12">
                    <span class="left">[武器]：<b class="n1">无</b></span>
                    <span class="right">+<b class="i1">0</b> ATK</span>
                </p>
                <p class="layui-col-md12">
                    <span class="left">[衣服]：<b class="n2">无</b></span>
                    <span class="right">+<b class="i2">0</b> DEF</span>
                </p>
                <p class="layui-col-md12">
                    <span class="left">[盾牌]：<b class="n3">无</b></span>
                    <span class="right">+<b class="i3">0</b> DEF</span>
                </p>
                <p class="layui-col-md12">
                    <span class="left">[鞋子]：<b class="n4">无</b></span>
                    <span class="right">+<b class="i4">0</b> DEF</span>
                </p>
            </div>
            <div class="title layui-col-md12">
                <p>[技能]</p>
            </div>
            <div class="equipment skill layui-col-md12">
            </div>
        </div>
        <input class="focus" style="opacity:0">
        <div class="layui-body">
            <iframe id="frm" src="/main" frameborder="0" style="width:100%;height:100%"></iframe>
        </div>
    </div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
function battle_msg(log, monster) {
    layer.alert("遇到怪物。", {
        title: false,
        btn: "-- space --",
        closeBtn: false,
        area: ['800px', '500px'],
        yes: function(index, layero){}
    })

    monster_info = "[名称]：" + monster.name + "<br/>"
    monster_info += "[等级]：" + monster.level + "<br/>"
    monster_info += "[生命力]：" + monster.hp + "<br/>"
    monster_info += "[攻击力]：" + monster.atk + "<br/>"
    monster_info += "[防御力]：" + monster.defense + "<br/>"
    monster_info += "[命中率]：" + monster.hit + "<br/>"
    monster_info += "[闪避率]：" + monster.dod + "<br/>"
    monster_info += "[暴击率]：" + monster.cri

    layer.tips(monster_info, '.layui-layer-dialog',{
        time:8000e3
    });

    index = 1
    len = log.length
    $.each(log, function (k, v) {
        setTimeout('battle_log("'+v+'","'+index+'","'+len+'")', index * 1000);
        index += 1
    })
}

function battle_log(m, i, j){
    $(".layui-layer-content:first").append("<br/>" + m)
    $(".layui-layer-content").scrollTop($(".layui-layer-content").prop('scrollHeight'));
    if(i == j){
        space_down()
    }
}

function space_down(){
    $(document).one("keydown",function (event) {
        event.preventDefault(); // 禁用默认按键事件

        var keyNum = event.which; // 获取按键

        if (keyNum == 32) {
            layer.closeAll();
            $(this).contents().find("#frm").focus()
        }
    })
}
</script>
</html>